<template>
  <div >
   
  <el-row class="tac">
  <el-col :span="24">
   <!-- <div class="btn"> <i class="myicon myicon-menu toggle-btn" @click="toggleCollapse" ></i></div> -->
   <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b"
       router
       @open="handleOpen" @close="handleClose" :collapse="isCollapse"
      >
      
      <el-submenu :index="'/'+firstItem.path" v-for="(firstItem,i) in menuList" :key="i">
        <!-- 第一层 标题导航 -->
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span>{{firstItem.authName}}</span>
        </template>
        <!-- 第二层标题导航 -->
        <el-menu-item-group>
          <el-menu-item :index="'/'+secondItem.path" v-for="(secondItem,j) in firstItem.children" :key="j">
             <router-link to="/users"><i class="el-icon-menu"></i>{{secondItem.authName}}</router-link>
          </el-menu-item>
         
        </el-menu-item-group>
      </el-submenu>
     

    </el-menu>
  </el-col>
</el-row>
  </div>
</template>

<script>
import {getMenus} from '../api/index'
export default {
   data() {
      return {
        isCollapse: false,
        menuList:[]
      };
    },
    methods:{
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    //    toggleCollapse() {
    //   this.isCollapse = !this.isCollapse;
    // },
      // 获取左侧菜单列表
      async initGetMenus(){
        let {data,meta:{status}}=await getMenus()
        if(status!=200)return this.$message.error('请求失败')
        this.menuList=data
      }
    },
    created(){
      this.initGetMenus()
    }
}
</script>

<style scoped>
  .el-submenu__title{
      text-align: left;
    }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  /* .el-radio-group{
    min-width: 64px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #ccc;
  } */
 
</style>
